<article class="md-editor">
  <!--可以抽离组件:工具栏和dropdown工具栏-->
  <div class="panel">
    <div class="btn-group" role="group" aria-label="...">
      <button class="btn btn-primary" (click)="codemirror.fullScreen()">全屏/F11</button>
      <div class="btn-group" role="group" dropdown>
        <button type="button " class="btn btn-primary dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          主题
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="btn-primary" (click)="codemirror.theme('default')">default</a></li>
          <li><a class="btn-primary" (click)="codemirror.theme('base16-dark')">base16-dark</a></li>
          <li><a class="btn-primary" (click)="codemirror.theme('base16-light')">base16-light</a></li>
          <li><a class="btn-primary" (click)="codemirror.theme('monokai')">monokai</a></li>
          <li><a class="btn-primary" (click)="codemirror.theme('base16-light')">base16-light</a></li>
          <li><a class="btn-primary" (click)="codemirror.theme('seti')">seti</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group" dropdown>
        <button type="button " class="btn btn-primary dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          快捷键
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="btn-primary" (click)="codemirror.keyMap('sublime')">sublime</a></li>
          <li><a class="btn-primary" (click)="codemirror.keyMap('emacs')">emacs</a></li>
          <li><a class="btn-primary" (click)="codemirror.keyMap('vim')">vim</a></li>
        </ul>
      </div>
      <button class="btn btn-primary" (click)="updateMarkdown()">保存</button>
      <a class="btn btn-primary" [routerLink]="['../../articles']">取消</a>
    </div>
  </div>
  <div class="editor-panel">
    <div class="md-editor-panel col-md-6">
      <codemirror [markdown]="article?.markdown" (mdTextChange)="markdownTextChange($event)"></codemirror>
    </div>

    <div class="md-preview-panel col-md-6">
      <md-preview [mdArticle]="mdArticle"></md-preview>
    </div>
  </div>
</article>
